<template>
  <view>
    <view class="w100  pl-30 pr-30">
      <view class="w100 mt-20 mb-20">
        <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" />
      </view>
      <view class="w100 bgff mt-10 mb-10 pl-20 pr-20 pt-10 pb-10 br-20">
        <view v-if="current == 0">
          <view class="rows rowsm mb-20">
            <scroll-view scroll-x="true" style="white-space: nowrap;">
              <view class="rows rowsm h100">
                <view class="pl-20 pr-20 h-52 rowsc rowsm br-26 fs-26 mr-20" style="" v-for="(item, index) in applicaType"
                  :key="index"
                  :style="active2 == applicaType[index].value ? 'color: #fff;background: linear-gradient(to bottom,#4897FF,#4878FF);' : 'background-color: #F4F4F4;color: #666;'"
                  @click="handelApplication(item)">{{ item.name }}</view>
              </view>
            </scroll-view>
          </view>
          <view class="rows rowsm mb-20">
            <scroll-view scroll-x="true" style="white-space: nowrap;">
              <view class="rows rowsm h100">
                <view class="pl-20 pr-20 h-52 rowsc rowsm br-26 fs-26 mr-20" style=""
                  v-for="(item, index) in applicaStatus" :key="index"
                  :style="active5 == applicaStatus[index].value ? 'color: #fff;background: linear-gradient(to bottom,#4897FF,#4878FF);' : 'background-color: #F4F4F4;color: #666;'"
                  @click="handelApplicaSatut(item)">{{ item.name }}</view>
              </view>
            </scroll-view>
          </view>
        </view>
        <view v-if="current == 1">
          <view class="rowsb rowsm mb-20 mt-20">
            <scroll-view scroll-x="true" style="white-space: nowrap;width: 100%;">
              <view class="rows rowsm h100">
                <view class="pl-20 pr-20 h-52 rowsc rowsm br-26 fs-26 mr-20" style="" v-for="(item, index) in engageType"
                  :key="index"
                  :style="active4 == engageType[index].value ? 'color: #fff;background: linear-gradient(to bottom,#4897FF,#4878FF);' : 'background-color: #F4F4F4;color: #666;'"
                  @click="handelTabEngageType(index)">{{ item.name }}</view>
              </view>
            </scroll-view>
          </view>
          <view class="rowsb rowsm mb-20 mt-20">
            <scroll-view scroll-x="true" style="white-space: nowrap;width: 100%;">
              <view class="rows rowsm h100">
                <view class="pl-20 pr-20 h-52 rowsc rowsm br-26 fs-26 mr-20" style="" v-for="(item, index) in taskTab"
                  :key="index"
                  :style="active == taskTab[index].value ? 'color: #fff;background: linear-gradient(to bottom,#4897FF,#4878FF);' : 'background-color: #F4F4F4;color: #666;'"
                  @click="handelTab(index)">{{ item.name }}</view>
              </view>
            </scroll-view>
          </view>
          <view class="rows rowsm mb-20">
            <scroll-view scroll-x="true" style="white-space: nowrap;">
              <view class="rows rowsm h100">
                <view class="pl-20 pr-20 h-52 rowsc rowsm br-26 fs-26 mr-20" style=""
                  v-for="(item, index) in completionStatus" :key="index"
                  :style="active3 == completionStatus[index].value ? 'color: #fff;background: linear-gradient(to bottom,#4897FF,#4878FF);' : 'background-color: #F4F4F4;color: #666;'"
                  @click="handelCompletion(index)">{{ item.name }}</view>
              </view>
            </scroll-view>
          </view>
        </view>
        <view class="rows rowsm mb-20">
          <view class="title" style="width:20%;">任务名称：</view>
          <u-input placeholder="请输入内容" border="surround" v-model="taskName" size="mini" @change="getList"></u-input>
        </view>
        <view class="rows rowsm mb-20">
          <view class="title">发布时间：</view>
          <uni-datetime-picker v-model="range" type="daterange" @change="changeTime" />
        </view>

      </view>
      <!-- 内容区域列表 -->
      <view class="content-warp" v-if="itemList.length > 0">
        <view class="item-warp" v-for="item in itemList" :key="item.id" @click="goPage(item)">
          <view class="txt-warp">
            <text class="title">
              {{ item.taskName.length > 8 ? (item.taskName || '').slice(0, 8) + '...' : item.taskName }}
            </text>
            <text v-if="current == 1 && item.participationWay == 1">
              <text class="fw-600 fs-26"> 次数：</text>
              {{ item.performTaskNumber || 0 }} / {{ item.taskNumber }}
            </text>
            <text class="btn" v-if="current == 1 && item.participationWay == 2">
              <text class="fs-26"> {{ item.state == 0 ? '未完成' : '已完成' }} </text>
            </text>

            <view class="btn" v-if="current == 0">
              <view>
                {{ (applicaStatus.find(v => v.value == item.participationStatus) || {}).name }}
              </view>
            </view>
          </view>
          <view class="rows rowsm rowsb mb-30 mt-30" v-if="current == 1">
            <!-- <view class="requirement">
              <text class="fw-600 fs-26"> 实践任务要求：</text>
              <text>{{ item.taskRequire }}</text>
            </view> -->
            <view class="requirement">
              <text class="fw-600 fs-26"> 参与方式：</text>
              <text>{{ item.participationWay == 1 ? '指定学生参与' : '学生自选报名' }}</text>
            </view>
          </view>
          <view class="rows rowsm rowsb mb-30 mb-30">
            <view>
              <text class="fw-600 fs-26"> 任务时间：</text>
              <text>{{ (item.startTime || '').slice(0, 10) }} ~ {{ (item.endTime || '').slice(0, 10) }}</text>
            </view>
            <view>
              <text class="fw-600 fs-26"> 任务状态：</text>
              <text>{{ taskTab2.find(v => v.value == item.taskStatus).name }}</text>
            </view>
          </view>
          <view class="rows rowsm rowsb mb-30 mb-30" v-if="current == 0">
            <view>
              <text class="fw-600 fs-26"> 报名时间：</text>
              <text>{{ (item.applyStartTime || '').slice(0, 10) }} ~ {{ (item.applyEndTime || '').slice(0, 10) }}</text>
            </view>
            <view>
              <text class="fw-600 fs-26"> 报名状态：</text>
              <text>{{ (applicaType.find(v => v.value == item.applyStatus) || {}).name }}</text>
            </view>
          </view>
          <view class="rows rowsm rowsb mb-10">
            <view>
              <text class="fw-600 fs-26"> 发布时间：</text>
              <text>{{ (item.releaseTime || '').slice(0, 16) }}</text>
            </view>
            <view>
              <text class="fw-600 fs-26"> 积分上限：</text>
              <text>{{ item.pointsCap }}</text>
            </view>
          </view>
        </view>
      </view>
      <view v-else class="notYet">
        暂无数据
      </view>

    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: ['任务报名', '任务填报'],
      current: 0,
      taskName: '',
      active: 0,
      active2: -1,
      active3: 0,
      active4: 0,
      active5: -1,
      title: '',
      range: [],
      taskTab: [
        { name: '全部', value: 0 },
        { name: '未开始', value: 1 },
        { name: '进行中', value: 2 },
        { name: '已结束', value: 3 },
      ],
      engageType: [
        { name: '全部', value: 0 },
        { name: '指定学生参与', value: 1 },
        { name: '学生自选报名', value: 2 },
      ],
      applicaType: [
        { name: '全部', value: -1 },
        { name: '报名未开始', value: 1 },
        { name: '报名中', value: 2 },
        { name: '报名已结束', value: 3 },
      ],
      applicaStatus: [
        { name: '全部', value: -1 },
        { name: '未报名', value: 0 },
        { name: '报名未审核', value: 1 },
        { name: '报名已通过', value: 2 },
        { name: '报名已驳回', value: 3 },
      ],
      completionStatus: [
        { name: '全部', value: 0 },
        { name: '未完成', value: 1 },
        { name: '已完成', value: 2 }
      ],
      taskTab2: [
        { name: '未发布', value: 0 },
        { name: '未开始', value: 1 },
        { name: '进行中', value: 2 },
        { name: '已结束', value: 3 }
      ],
      itemList: [],
      taksType: '',
      total: 0,
      limit: {
        pageNum: 1,
        pageSize: 10,
      },
      practiceType: []
    };
  },
  onLoad(e) {
    this.taksType = e.type;
    this.current = Number(e.current);
    this.$tools.axiosFromToken('GET', 'project/practice/type/config/listAll', {}, '加载中').then(res => {
      if (res.code != 200) return this.$tools.showtt(res.msg)
      this.title = res.rows.find(v => v.id == e.type).name;
      uni.setNavigationBarTitle({
        title: this.title + '任务'
      });
    })
  },
  onShow() {
    this.getNum();
    this.getList();
  },
  // 下拉到底部后加载新数据
  onReachBottom() {
    if (this.itemList.length < this.total) {
      this.limit.pageNum++;
      this.getList();
    }
  },
  methods: {
    onClickItem(e) {
      if (e != this.current) {
        this.current = e.currentIndex;
        this.limit.pageNum = 1;
        this.taskName = '';
        this.active = 0;
        this.active2 = -1;
        this.active3 = 0;
        this.active4 = 0;
        this.active5 = -1;
        this.getList();
      }
    },
    getNum() {
      this.$tools.axiosFromToken('GET', `practice/user/popUps`, { practiceType: this.taksType }, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg)
        this.items = [`任务报名(${res.data.haveApplyButNoDoNumber || 0})`, `任务填报(${res.data.toBeFilledInNumber || 0})`];
      })
    },
    getList() {
      const data = {
        taskName: this.taskName,
        taskStatus: this.active === 0 ? null : this.active,
        state: this.active3 === 0 ? null : this.active3 - 1,
        participationStatus: this.active5 === -1 ? null : this.active5,
        applyStatus: this.active2 === -1 ? null : this.active2,
        startTime: this.range.length > 0 ? this.range[0] + " 00:00:00" : null,
        endTime: this.range.length > 0 ? this.range[1] + " 23:59:59" : null,
        participationWay: this.current == 0 ? 2 : 1,
        fillInParticipationWay: this.active4 === 0 ? null : this.active4
      };
      this.$tools.axiosFromToken('GET', `project/apply/listByStudent?pageNum=${this.limit.pageNum}&pageSize=${this.limit.pageSize}&practiceType=${this.taksType}`, data, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg)
        this.total = res.total
        if (this.limit.pageNum == 1) {
          this.itemList = res.rows;
        } else {
          this.itemList = [...this.itemList, ...res.rows];
        }
      })
    },
    handelReset() {
      this.limit.pageNum = 1;
      this.taskName = '';
      this.active = 0;
      this.active2 = -1;
      this.active3 = 0;
      this.active4 = 0;
      this.active5 = -1;
      this.getList();
    },
    handelTabEngageType(index) {
      this.limit.pageNum = 1;
      this.active4 = this.engageType[index].value;
      this.getList();
    },
    handelTab(index) {
      this.limit.pageNum = 1;
      this.active = this.taskTab[index].value;
      this.getList();
    },
    handelApplication(item) {
      this.limit.pageNum = 1;
      this.active2 = item.value;
      this.getList();
    },
    handelApplicaSatut(item) {
      this.limit.pageNum = 1;
      this.active5 = item.value;
      this.getList();
    },
    handelCompletion(index) {
      this.limit.pageNum = 1;
      this.active3 = this.completionStatus[index].value;
      this.getList();
    },
    changeTime(e) {
      this.range = e;
      this.limit.pageNum = 1;
      this.getList();
    },
    goPage(item) {
      this.$tools.goNext(`/pagesCopy/practiceTask/practiceDetail?title=${this.title}&id=${item.id}&performTaskNumber=${item.performTaskNumber}&participationStatus=${item.participationStatus}&taskId=${item.practiceTaskUserApplyId}`)

      // if(item.isSubmit == '已完成'){
      //   this.$tools.goNext(`/pagesCopy/submitWork/weekWorkDetail?title=${this.title}&item=${JSON.stringify(item)}`)
      // }else{
      //   this.$tools.goNext(`/pagesCopy/practiceTask/practiceDetail?title=${this.title}&item=${JSON.stringify(item)}`)
      // }
    },
  }
}
</script>

<style lang="scss">
page {
  background-color: #f4f5f7;
  padding-bottom: 10px;

  ::v-deep .u-input {
    padding: 3px !important;
  }

  ::v-deep .uni-date__x-input {
    height: auto !important;
    padding: 5px !important;
  }
}

::v-deep .uni-date {
  .uni-date__icon-clear {
    top: -4px;
  }
}

.mark {
  text-align: right;
  color: #f92929;
}

.title {
  color: #333;
  font-size: 28rpx;
  font-weight: 500;
  // width: 300rpx;
  white-space: nowrap;
}

.title2 {
  color: #333;
  font-size: 28rpx;
  width: 120rpx;
}

.btnWarp {
  width: 140px;
  height: 49px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .u-button.data-v-2bf0e569 {
    height: 30px !important;
    margin-left: 10px;
  }

}

.content-warp {
  color: #333;
  font-size: 24rpx;

  .item-warp {
    padding: 24rpx;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    margin-top: 30rpx;

    .requirement {
      width: 100%;
      // 溢出显示省略号
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }

    .btn {
      font-size: 26rpx;
      border: 1px solid #5ac725;
      padding: 5px 10px;
      border-radius: 20px;
      color: #5ac725;
      background: #fff;
    }
  }

  .txt-warp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .title {
      font-size: 30rpx;
      font-weight: bold;
    }
  }
}

.notYet {
  margin-top: 50rpx;
  width: 100%;
  text-align: center;
  font-weight: 0 !important;
}
</style>
